<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>学生列表</title>

    <!-- jquery文件 -->
    <script src="/js/jquery-3.7.1.min.js"></script>

    <!-- css片段 -->
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <link rel="stylesheet" href="/css/list.css">
</head>

<body>

    <!-- 主标题 -->
    <div class="main-title">学生信息表</div>

    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" onclick="clearInfo()">
        新增学生信息
    </button>
    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModalSearch" onclick="clearInfo()">
        查询学生信息
    </button>

    <!-- 设计表格 -->
    <table class="table table-striped">
        <!-- 表头 -->
        <thead>
        <tr>
            <th>序号</th>
            <th>学号</th>
            <th>姓名</th>
            <th>密码</th>
            <th>性别</th>
            <th>年龄</th>
            <th>成绩</th>
            <th style="width: 100px;">操作</th>
        </tr>
        </thead>
        <!--表中内容-->
        <tbody id="students"></tbody>
    </table>

    <!-- 新增学生信息表单 -->
    <div class="modal fade" tabindex="-1" role="dialog" id="myModal">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">学生信息</h4>
                </div>
                <div class="modal-body">
                    <form id="formStudent">
                        <input hidden="hidden" id="id" name="id">
                        <div class="form-group">
                            <label for="no">学号:</label>
                            <input type="text" class="form-control" id="no" name="no" placeholder="No">
                        </div>
                        <div class="form-group">
                            <label for="name">姓名:</label>
                            <input type="text" class="form-control" id="name" name="name" placeholder="Name">
                        </div>
                        <div class="form-group">
                            <label for="password">密码:</label>
                            <input type="password" class="form-control" id="password" name="password" placeholder="Password">
                        </div>
                        <div class="form-group">
                            <label for="sex">性别:</label>
                            <select class="form-control" id="sex" name="sex">
                                <option value="1">男</option>
                                <option value="2">女</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="age">年龄:</label>
                            <input type="text" class="form-control" id="age" name="age" placeholder="Age">
                        </div>
                        <div class="form-group">
                            <label for="score">成绩:</label>
                            <input type="text" class="form-control" id="score" name="score" placeholder="Score">
                        </div>
                    </form>

                </div>
                <div class="modal-footer" id="buttons">
                    <button type="button" class="btn btn-primary" onclick="addStudent()" id="saveButton">保存</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    <!-- 查询学生信息表单 -->
    <div class="modal fade" tabindex="-1" role="dialog" id="myModalSearch">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">学生信息</h4>
                </div>
                <div class="modal-body">
                    <div class="modal-body">
                        <form id="formStudentSearch">
                            <div class="form-group">
                                <label for="name">请输入要查询的学生姓名:</label>
                                <input type="text" class="form-control" id="nameInput" name="name" placeholder="Name">
                            </div>
                            <button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" onclick="searchStudent()">
                                查询
                            </button>
                            <hr />
                            <div class="form-group">
                                <label for="no">学号:</label>
                                <div class="form-control" id="noSearch"></div>
                            </div>
                            <div class="form-group">
                                <label for="name">姓名:</label>
                                <div class="form-control" id="nameSearch"></div>
                            </div>
                            <div class="form-group">
                                <label for="password">密码:</label>
                                <div class="form-control" id="passwordSearch"></div>
                            </div>
                            <div class="form-group">
                                <label for="sex">性别:</label>
                                <div class="form-control" id="sexSearch"></div>
                            </div>
                            <div class="form-group">
                                <label for="age">年龄:</label>
                                <div class="form-control" id="ageSearch"></div>
                            </div>
                            <div class="form-group">
                                <label for="score">成绩:</label>
                                <div class="form-control" id="scoreSearch"></div>
                            </div>
                        </form>

                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    <!-- js片段 -->
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
    <script>
        // 清除表单信息
        function clearInfo(){
            $("#id").val("");
            $("#no").val("");
            $("#name").val("");
            $("#password").val("");
            $("#sex").val("");
            $("#age").val("");
            $("#score").val("");
            $("#nameInput").val("");
            $("#noSearch").html("");
            $("#nameSearch").html("");
            $("#passwordSearch").html("");
            $("#sexSearch").html("");
            $("#ageSearch").html("");
            $("#scoreSearch").html("");
        }


        // 查询学生信息
        function searchStudent(){
            var name = document.getElementById("nameInput").value;
            $.ajax({
                url: "/webapi/student/getbyname?name=" + name,
                type: "get",
            }).done(function (rs){
                if (rs[0].sex === 1){
                    var sex = "男";
                }
                else {
                    var sex = "女"
                }
                $("#noSearch").html(rs[0].no);
                $("#nameSearch").html(rs[0].name);
                $("#passwordSearch").html("");
                $("#sexSearch").html(sex);
                $("#ageSearch").html(rs[0].age);
                $("#scoreSearch").html(rs[0].score);
                }
            )
        }

        // 编辑学生信息
        function editStudent(id){
            $("#myModal").modal('show');
            $.ajax({
                url: "/webapi/student/get/" + id,
                type: "get"
            }).done(function (rs){
                $("#id").val(rs.id);
                $("#no").val(rs.no);
                $("#name").val(rs.name);
                $("#password").val("");
                $("#sex").val(rs.sex);
                $("#age").val(rs.age);
                $("#score").val(rs.score);
            })
            // 更改“保存”按钮的函数
            var element = document.getElementById("saveButton");
            element.setAttribute("onclick", "updateStudent()");
        }

        // 保存编辑后的学生信息
        function updateStudent(){
            var data = $("#formStudent").serialize();
            $.ajax({
                url: "/webapi/student/update/",
                method: "post",
                data: data
            }).done(function (){
                loadTable();
                $('#myModal').modal('hide')
            })
        }

        // 删除学生信息
        function deleteStudent(id){
            $.ajax({
                url: "/webapi/student/delete/" + id,
                method: "delete",
            }).done(function (){
                loadTable();
            })
        }

        // 新增学生信息
        function addStudent(){
            var data = $("#formStudent").serialize();

            $.ajax({
                url: "/webapi/student/insert",
                method: "post",
                data: data
            }).done(function (){
                loadTable();
                $('#myModal').modal('hide')
            })
        }

        <!-- 获取当前所有学生信息 -->
        function loadTable(){
            $.ajax({
                url: "/webapi/student/list",
                type:"GET",
                success:function (data) {
                    var html="";
                    for(var i=0; i<data.length;i++){
                        var sex="";
                        var item = data[i];
                        html+="<tr id='" + i + "'>";

                        html+="<td>"+item.id + "</td>>";
                        html+="<td>"+item.no + "</td>>";
                        html+="<td class='studentName'>"+item.name + "</td>>";
                        html+="<td>"+item.password + "</td>>";
                        if (item.sex === 1){
                            sex = "男";
                        }
                        else if (item.sex === 2){
                            sex = "女";
                        }
                        else{
                            sex = "未知";
                        }
                        html+="<td>"+sex + "</td>>";
                        html+="<td>"+item.age + "</td>>";
                        html+="<td>"+item.score + "</td>>";
                        html+="<td><a href='#' onclick='editStudent("+item.id+")'>编辑</a>" + "  " +
                            "<a href='#' onclick='deleteStudent("+item.id+")'>删除</a></td>";

                        html+="</tr>";
                    }
                    $("#students").html(html);
                }
            });
        }
        $(function (){
            loadTable();
        })

    </script>
</body>




